<template>
  <div>
    <h2>用户还款显示</h2>
    <table class="table table-bordered">
      <tr>
        <td>用户还款ID</td>
        <td>{{ state.UB_Id }}</td>
      </tr>
      <tr>
        <td>用户借款ID</td>
        <td>{{ state.BI_Id }}</td>
      </tr>
      <tr>
        <td>借款名称</td>
        <td>{{ state.BI_Name }}</td>
      </tr>
      <tr>
        <td>借款金额</td>
        <td>{{ state.UB_Money }}</td>
      </tr>
      <tr>
        <td>还款金额</td>
        <td><input type="text" v-model="UHB_Money"></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="还款" class="btn btn-success" @click="borrow"></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {reactive,toRefs,onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()

const data:any=reactive({
  state:{
    UB_Id:'',
    BI_Id:'',
    BI_Name:'',
    UB_Money:''
  },
  UHB_Money:''
})

let {state,UHB_Money} =toRefs(data)

onMounted(()=>{
  show()
})

const show=()=>{
  axios({
    url:'/api/Borrow/GetHBorrow',
    method:'get',
    params:{
      ubid:route.query.id,
      UB_Id:state.value.UB_Id,
      BI_Id:state.value.BI_Id,
      UB_Money:state.value.UB_Money,
      BI_Name:state.value.BI_Name
    }
  }).then(res=>{
    console.log(res)
    state.value=res.data.data[0]
  }).catch(err=>{
    console.log(err)
  })
}


const borrow=()=>{
  if(Number(UHB_Money.value)>Number(state.value.UB_Money)){
    alert("还款金额不能大于借款金额")
    return
  }
  axios({
    url:'/api/Borrow/PostHBorrow',
    method:'post',
    data:{
      UB_Id:route.query.id,
      UHB_Money:UHB_Money.value
    }
  }).then(res=>{
    console.log(res)
    if(res.data.data>0){
      alert("还款成功")
      router.push('/userborrow')
    }else{
      alert("还款失败")
    }
  }).catch(err=>{
    console.log(err)
  })
}



</script>

<style scoped>




</style>
